<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableBtns="tableBtns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import SearchDatePicker from '@/components/SearchDatePicker'
import { activityList, actDownLine } from '@/api/activity'
import formatter from '@/utils/format'
export default {
  name: 'ActivityList',
  components: { TableSearch, SearchDatePicker },
  data() {
    return {
      loading: true,
      form: {
        endTime: null,
        startTime: null,
        onlineType: 'ALL',
        actType: -1, //表示全部类型的活动
      },
      tableBtns: [
        {
          label: '新增',
          click: () => this.$router.push({ path: '/activity/add' }),
          icon: 'el-icon-plus',
          resourceId:
            '/web/activity-management/activityList-management/新增活动',
        },
      ],
      searchPath: '/web/activity-management/activityList-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'actName',
          placeholder: '请输入活动名称',
          clearable: true,
          resourceId:
            '/web/activity-management/activityList-management/活动名称',
        },
        {
          type: 'text',
          value: 'stationName',
          placeholder: '请输入参与电站',
          clearable: true,
          resourceId:
            '/web/activity-management/activityList-management/参与电站/不参与代理商',
        },
        {
          slot: 'date',
        },
        {
          type: 'radio',
          value: 'onlineType',
          options: [
            {
              label: 'ALL',
              text: '全部',
            },
            {
              label: 'NOTBEGIN',
              text: '未开始',
            },
            {
              label: 'ONLINE',
              text: '上线',
            },
            {
              label: 'OFFLINE',
              text: '下线',
            },
          ],
          resourceId: '/web/activity-management/activityList-management/状态',
        },
        {
          type: 'radio',
          value: 'actType',
          options: [
            {
              label: -1,
              text: '全部',
            },
            {
              label: 0,
              text: '折扣活动',
            },
            {
              label: 1,
              text: '优惠券活动',
            },
            {
              label: 2,
              text: '时长卡活动',
            },
            {
              label: 3,
              text: '和能量活动',
            },
          ],
          resourceId:
            '/web/activity-management/activityList-management/活动类型',
        },
      ],
      tableData: {},
      columns: [
        {
          label: '活动ID',
          prop: 'id',
          resourceId: '/web/activity-management/activityList-management/活动ID',
        },
        {
          label: '活动名称',
          prop: 'actName',
          resourceId:
            '/web/activity-management/activityList-management/活动名称',
        },
        {
          label: '开始时间',
          prop: 'actStart',
          formatter,
          resourceId:
            '/web/activity-management/activityList-management/开始时间',
        },
        {
          label: '结束时间',
          prop: 'actEnd',
          formatter,
          resourceId:
            '/web/activity-management/activityList-management/结束时间',
        },
        {
          label: '活动类型',
          prop: 'actType',
          formatter,
          resourceId:
            '/web/activity-management/activityList-management/活动类型',
        },
        {
          label: '活动详情',
          prop: 'remark',
          resourceId:
            '/web/activity-management/activityList-management/活动详情',
        },
        {
          label: '参与电站/不参与代理商',
          width: '400px',
          resourceId:
            '/web/activity-management/activityList-management/参与电站/不参与代理商',
          formatter: (row) => {
            return (row.stationNames || [])
              .concat(row.excludeUserNames || [])
              .map((item) => {
                return (
                  (item && item.stationName) || (item && item.userName) || ''
                )
              })
              .join(',')
          },
        },
        {
          label: '状态',
          prop: 'onLineStatus',
          resourceId: '/web/activity-management/activityList-management/状态',
        },
        {
          label: '操作',
          resourceId: '/web/activity-management/activityList-management/操作',
          buttons: [
            {
              label: '编辑',
              size: 'small',
              ifRender: (row) => {
                return (
                  row.onLineStatus === '未开始' &&
                  this.userId === row.createUser
                )
              },
              click: (row) => {
                this.$router.push({
                  path: `/activity/edit/${row.id}`,
                })
              },
              resourceId:
                '/web/activity-management/activityList-management/编辑',
            },
            {
              label: '下线',
              size: 'small',
              click: this.handleOffLine,
              ifRender: (row) => {
                return (
                  row.onLineStatus === '上线' && this.userId === row.createUser
                )
              },
              resourceId:
                '/web/activity-management/activityList-management/下线',
            },
            {
              label: '详情',
              size: 'small',
              click: (row) => {
                this.$router.push({
                  path: `/activity/detail/${row.id}/${row.actType}`,
                })
              },
              resourceId:
                '/web/activity-management/activityList-management/详情',
            },
          ],
        },
      ],
    }
  },
  computed: {
    userId() {
      return this.$store.getters.userId
    },
  },
  methods: {
    reset() {
      this.form = {
        endTime: null,
        startTime: null,
        status: null,
      }
    },
    handleTableData(params) {
      this.loading = true
      this.form.onlineType === 'ALL' && delete params.onlineType
      this.form.actType === -1 && delete params.actType
      activityList(params).then(
        (res) => {
          this.loading = false
          // res.list.forEach((item) => {
          //   var names = []
          //   if (item.stationNames && item.stationNames.length > 0) {
          //     item.stationNames.forEach((innerItem) => {
          //       names.push(innerItem.stationName)
          //     })
          //   } else if (
          //     item.excludeUserNames &&
          //     item.excludeUserNames.length > 0
          //   ) {
          //     item.excludeUserNames.forEach((innerItem) => {
          //       names.push(innerItem.userName)
          //     })
          //   }
          //   item.namesStrs = names.length > 0 ? names.join() : '--'
          // })
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        },
        () => {
          this.loading = false
        }
      )
    },
    refreshTable() {
      this.$refs.tableSearch.refreshTable()
    },
    handleOffLine(row) {
      this.$confirm(`你确定要下线（${row.actName}）活动吗？`, '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      })
        .then(() => {
          actDownLine({ actId: row.id }).then(() => {
            this.$message({
              showClose: true,
              message: '操作成功',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
  },
}
</script>
